import React,{Component} from "react";
import {BackTop, Carousel, Input, Button, message, Modal } from 'antd';
import { Link, withRouter } from "react-router-dom";
import Header from "../component/header.js";
import Footer from "../component/footer.js";
import SearchBannerF from "../utils/searchBannerF.js";
import moment from 'moment';
import ajax from "../ajaxMethod";

import "../assets/stylesheets/index.css";
import { react } from "babel-types";

const format = "YYYY-MM-DD";
class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
            articles:{
                announcement:[],
                airport:[],
                airplain:[],
                passenger:[],
            },
        }
    }
    componentDidMount(){
        this.getData();
    }
    getData = () =>{
        let _this = this;
        ajax.getAjax("/interface/index",{}, res=>{
            if(res.success){
                let data = res.data,
                    announcement = [], 
                    airport = [],
                    airplain = [],
                    passenger = [];
                for(let i = 0; i < data.length; i++){
                    if(data[i].type === 0){
                        announcement = data[i].data;
                    }
                    if(data[i].type === 1){
                        airport = data[i].data;
                    }
                    if(data[i].type === 2){
                        airplain = data[i].data;
                    }
                    if(data[i].type === 3){
                        passenger = data[i].data;
                    }
                }
                _this.setState({ articles: {...this.state.articles, announcement: announcement, airport: airport, airplain: airplain, passenger: passenger} });
            }else{
                console.error("首页错误的结果", res);
            }
        }, err=>{
            console.error("首页获取数据错误");
        })
    }
    getArticleDetail(id){
        if(id){
            window.open("http://localhost:3000/articleDetail"+"?id="+id);
        }
    }
    commentsSubmit = (e) =>{
        let values = this.props.form.getFieldsValue(),
            regExp = /\s+/g;
        if(localStorage.getItem("username")){//用户已经登陆
            if(values.comment){
                if(values.comment.replace(regExp, "")){
                    message.success("提交成功");
                }else{
                    message.info("请输入内容再提交");
                }
            }else{
                message.info("请输入内容再提交");
            }
        }else{//未登录
            message.error("未登录，请登陆后再试");
        }
        this.props.form.resetFields();
        e.preventDefault();
    }
    render(){
        let state = this.state;
        let articles = this.state.articles;
        return(     
        <div>
            <Header></Header>
            <div className="content-box">
                <div id="index-banner">
                    <SearchBannerF></SearchBannerF>
                    <div className="slider-box">
                        <Carousel className="slider" autoplay={true} speed={500} infinite={true} autoplaySpeed={5000}>
                            <div><img src={require("../assets/images/banner1.jpg")} alt=""/></div>
                            <div><img src={require("../assets/images/banner2.jpg")} alt=""/></div>
                            <div><img src={require("../assets/images/banner3.jpg")} alt=""/></div>
                        </Carousel>
                    <div className="black-banner"></div>
                </div>
                </div>
                <div className="content">
                    <div id="announcement" className="articles-box">
                        <div className="top">
                            <i className="icon-announce icon float-left"></i>
                            <h2 className="float-left">公告</h2>
                            <Link to="/announcement"><span className="float-right">>>更多</span></Link>
                        </div>
                        <i className="border"></i>
                        <ul className={articles.announcement.length?"list":"null"}> 
                            {(()=>{
                                if(articles.announcement.length){
                                    return articles.announcement.map(value=>{
                                        if(value.top){//置顶的文章
                                            return <li class="article matrix">
                                                <a target="_blank" onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div  class="headline import">
                                                    <a target="_blank" title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>[置顶]{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }else{
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }
                                    })
                                }else{
                                    return <p className="article-null">暂无数据</p>
                                }
                            })()}
                        </ul>
                    </div>
                    <div id="airport" className="articles-box">
                        <div className="top">
                            <i className="icon-airport icon float-left"></i>
                            <h2 className="float-left">机场</h2>
                            <Link to="/airport"><span className="float-right">>>更多</span></Link>
                        </div>
                        <i className="border"></i>
                        <ul className={articles.airport.length?"list":"null"}>
                            {(()=>{
                                if(articles.airport.length){
                                    return articles.airport.map(value=>{
                                        if(value.top){//置顶的文章
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline import">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>[置顶]{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }else{
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }
                                    })
                                }else{
                                    return <p className="article-null">暂无数据</p>
                                }
                            })()}
                        </ul>
                    </div>
                    <div id="airplain" className="articles-box">
                        <div className="top">
                            <i className="icon-airplain icon float-left"></i>
                            <h2 className="float-left">飞机</h2>
                            <Link to="/airplain"><span className="float-right">>>更多</span></Link>
                        </div>
                        <i className="border"></i>
                        <ul className={articles.airplain.length?"list":"null"}>
                            {(()=>{
                                if(articles.airplain.length){
                                    return articles.airplain.map(value=>{
                                        if(value.top){//置顶的文章
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline import">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>[置顶]{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }else{
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }
                                    })
                                }else{
                                    return <p className="article-null">暂无数据</p>
                                }
                            })()}
                        </ul>
                    </div>
                    <div id="passenger" className="articles-box">
                        <div className="top">
                            <i className="icon-paddenger icon float-left"></i>
                            <h2 className="float-left">乘客</h2>
                            <Link to="/passenger"><span className="float-right">>>更多</span></Link>
                        </div>
                        <i className="border"></i>
                        <ul className={articles.passenger.length?"list":"null"}>
                            {(()=>{
                                if(articles.passenger.length){
                                    return articles.passenger.map(value=>{
                                        if(value.top){//置顶的文章
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline import">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>[置顶]{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }else{
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }
                                    })
                                }else{
                                    return <p className="article-null">暂无数据</p>
                                }
                            })()}
                        </ul>
                    </div>
                </div>
            </div>
            <BackTop  visibilityHeight={300}></BackTop>
            <Footer></Footer>
        </div>
        )
    }

}
export default withRouter(Index);